@import 'react-resizable/css/styles.css';

.resizable-container {
  position: relative;
  &:last-child {
    .resizable-handler {
      right: 0px;
    }
  }
}

.resizable-box {
  position: absolute;
  left: 0;
  top: 0;
  background-clip: padding-box;
  width: 100%;
}

.resizable-handler {
  position: absolute;
  right: -5px;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 10px;
  height: 100%;
  cursor: col-resize;

  &:active,
  &:hover {
    z-index: 5;
    cursor: col-resize;

    & .resizable-line {
      background: var(--arh-color, #000);
      pointer-events: none;
    }
  }
}

.resizable-line {
  width: 4px;
  height: 100%;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.resizable-fake-box {
  width: 100%;
  height: 100%;
}

.resizable-title {
  position: relative;
  z-index: 0;
  &.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
